<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    body{
      margin-top: 0;
      margin-left: 0;
      margin-right: 0;
    }
    .el-header{
      position: fixed ;
      z-index: 10;
      overflow: hidden;
    }
    .el-menu.el-menu--horizontal{
      border-bottom: 0;
    }
    a{
      color: #000;
    }
    a:link {
      text-decoration: none;
    }
    .el-menu--horizontal>.el-menu-item,.el-menu--horizontal>.el-submenu .el-submenu__title{
      color: #fff;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header style="background-color: black;width: 100%;height: 120px">
      <div style="height: 55px;width: 1150px;margin: 0 auto">
        <img src="imgs/logo.png" alt="" >
      </div>
      <div style="width: 1200px;margin:0 auto;">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                 style="background-color: black;"
                 background-color="#000000"
                 text-color="#ffffff"
                 menu-trigger="hover"
                 collapse-transition
                 active-text-color="#ff0000">
          <!--                         >-->

          <span style="color:red;float: left;position: relative;top: 11px;font-size: 30px;vertical-align: middle">强盛健身</span>
          <el-menu-item index="1" style="margin-right: 40px">首页</el-menu-item>
          <el-submenu index="2" style="margin-right: 40px">
            <template slot="title" >健身服务</template>
            <el-menu-item index="2-1"><a href="courseCoach.html" style="text-decoration: none;color: white">健身指导</a></el-menu-item>
            <el-menu-item index="2-2">器械使用教程</el-menu-item>
            <el-menu-item index="2-3" >线下课程表</el-menu-item>
          </el-submenu>
          <el-menu-item index="3" style="margin-right: 40px"><a href="shopping.html">健身商城</a></el-menu-item>
          <el-submenu index="4" style="margin-right: 40px">
            <template slot="title">个人中心</template>
            <el-menu-item index="4-1">个人资料设置</el-menu-item>
            <el-menu-item index="4-2">消息管理</el-menu-item>
            <el-menu-item index="4-3">社区个人主页</el-menu-item>
            <el-menu-item index="4-4">退出帐号</el-menu-item>
          </el-submenu>
          <el-menu-item index="5" style="margin-right: 40px">健身社区</el-menu-item>
          <el-menu-item index="6" style="margin-right: 40px"><a href="admin.html">后端管理</a></el-menu-item>
          <span style="color: red;float:right;font-size: 10px"><p>全国统一客服、拓展热线</p><p>400-0000-311</p></span>
        </el-menu>
      </div>
    </el-header>
    <el-main style="width: 1200px;margin: 0 auto;margin-top: 130px">
      <el-row gutter="20">
        <el-col span="12">
          <el-card>
            <img src="imgs/coach/img.png" width="100%">
          </el-card>
        </el-col>
        <el-col span="12">
          <p style="font-size: 25px;font-weight: bold">张三（游泳教练——13年执教经验）</p>
          <el-divider></el-divider>
          <p style="font-size: 15px;color: #666">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
          <el-row gutter="10" style="text-align: center">
            <el-col span="8">
              <el-card>
                <img src="imgs/coach/img_1.png" width="100%">
              </el-card>
              <p>扫码添加微信</p>
            </el-col>
            <el-col span="8">
              <el-card>
                <img src="imgs/coach/img_2.png" width="100%">
              </el-card>
              <p>扫码关注公众号</p>
            </el-col>
            <el-col span="8">
              <el-card>
                <img src="imgs/coach/img_3.png" width="100%">
              </el-card>
              <p>扫码下载App</p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-main>
    <el-footer style="padding: 0;margin-top: 100px">
      <div style="background-color: black;  color: #fff;text-align: center;padding: 10px 0">
        <p>Copyright © 北京强盛健身有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
        <p>涵盖20余门课程体系，致力于打造权威的健身学习平台</p>
        <p>健身网站WWW.qiangshenjianshen.cn 专注于健身技能培训</p>
      </div>
    </el-footer>
  </el-container>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        activeIndex: '1',
        activeIndex2: '1',
      }
    },
    methods:{
      handleSelect(key, keyPath) {
        //key代表index   keyPath代表详细的位置
        console.log(key, keyPath);
      }
    }
  })
</script>
</html>